<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link href="css/header.css" rel="stylesheet" />
	<link href="css/iconfont.css" rel="stylesheet" />
    <script type="text/javascript" charset="utf-8">
      	mui.init();
		
		mui.plusReady(function () {
			plus.navigator.setStatusBarBackground("#C9394A");
			plus.navigator.setStatusBarStyle("light");
			
		});
    </script>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav title">
		<h1 class="mui-title title-color"><b>画布</b></h1>
	</header>
	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" tabindex="0">
			<!-- iconfont两种使用方式 -->
			<!-- <span class="mui-icon iconfont icon-fire"></span> -->
			<span class="mui-icon iconfont">&#xe729;</span>
			<span class="mui-tab-label">画布</span>
		</a>
		<a class="mui-tab-item" tabindex="1">
			<span class="mui-icon iconfont">&#xe609;</span>
			<span class="mui-tab-label">通讯录</span>
		</a>
		<a class="mui-tab-item" tabindex="2">
			<span class="mui-icon iconfont">&#xe602;</span>
			<span class="mui-tab-label">发现</span>
		</a>
		<a class="mui-tab-item" tabindex="3">
			<span class="mui-icon iconfont">&#xe637;</span>
			<span class="mui-tab-label">我</span>
		</a>
	</nav>
	
	<script type="text/javascript">
		
		var canvasArray = [
			{
				pageId: "canvas-chatlist.html",
				pageUrl: "canvas-chatlist.html",
			},
			{
				pageId: "canvas-contact.html",
				pageUrl: "canvas-contact.html",
			},
			{
				pageId: "canvas-discover.html",
				pageUrl: "canvas-discover.html",
			},
			{
				pageId: "canvas-me.html",
				pageUrl: "canvas-me.html",
			}
		];
		
		var canvasStyle = {
			top: "44px",
			bottom: "50px"
		}
		
		mui.plusReady(function () {
			
			// 禁止实体返回按键返回到登录页面
			mui.back = function () {
				return false;
			}
			
			// 获取当前的webview对象
			var indexWebview = plus.webview.currentWebview();
			
			// 向当前的主页webview追加子页的4张webview对象
			for (var i = 0; i < canvasArray.length; i++) {
				var canvasPage = plus.webview.create(
						canvasArray[i].pageUrl,
						canvasArray[i].pageId,
						canvasStyle)
				// 隐藏webview窗口
				canvasPage.hide();
				// 追加每一个子页面到当前住页面
				indexWebview.append(canvasPage);
			}
			plus.webview.show(canvasArray[0].pageId);
			
			// 批量绑定tap事件,展示不同的页面
			mui(".mui-bar-tab").on("tap", "a", function () {
				var tabIndex = this.getAttribute("tabindex");
				
				// 显示点击的tab选项所对应的页面
				plus.webview.show(canvasArray[tabIndex].pageId, "fade-in", 200)
				
				for (var i = 0; i < canvasArray.length; i++) {
					if (i != tabIndex) {
						// 隐藏其他的tab页面 
						plus.webview.hide(canvasArray[i].pageId, "fade-out", 200)
					}
				}
				
			})
			
		})
		
	</script>
	
</body>
</html>